<template>
  <div class="e-charts w100 h100" ref="chart" :style="{width, height}"></div>
</template>

<script>
  export default {
    name: "ECharts",
    props: {
      width: {
        type: String,
        default: '',
      },
      height: {
        type: String,
        default: '',
      },
      options: {
        type: Object,
        default() {
          return {}
        },
      },
      loading: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      options(val) {
        this.myChart[this.loading ? 'showLoading' : 'hideLoading']();
        this.initEChart();
      },
      loading(val) {
        if (this.myChart) {
          this.myChart[val ? 'showLoading' : 'hideLoading']();
        }
      },
    },
    data() {
      return {
        myChart: null
      }
    },
    mounted() {
      this.initEChart();
    },
    methods: {
      initEChart() {
        let myChart = this.Echarts.init(this.$refs.chart);
        this.myChart = myChart;
        myChart.clear();
        this.options.title = this.options.title || {};
        this.options.title.textStyle = this.options.title.textStyle || {};
        this.options.title.textStyle.fontSize = 16;
        myChart.setOption({
          color: [
            '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
            '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
            '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
            '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
          ],
          ...this.options,
        });
      },
    },
  }
</script>

<style scoped>

</style>
